<template>
  <div>
    <h1>【aty-table】 component demo</h1>
    <p>【aty-table】 本质</p>

    <aty-row class="fd-table-box">

      <aty-row>
        <aty-title level="4">1.【aty-table】 基础</aty-title>
        <aty-table
                   :pageable-data="tableData"
                   :width="200">
          <aty-table-column
                            label="序号"
                            type="index" />
          <aty-table-column
                            prop="date"
                            label="日期"
                            width="180" />
          <aty-table-column
                            prop="name"
                            label="姓名"
                            width="180" />
          <aty-table-column
                            prop="address"
                            label="地址" />
        </aty-table>
      </aty-row>

      <aty-row>
        <aty-title level="4">2.【aty-table】 带斑马纹表格</aty-title>
        <aty-table
                   :pageable-data="tableData"
                   stripe
                   style="width: 100%">
          <aty-table-column
                            prop="date"
                            label="日期"
                            width="180" />
          <aty-table-column
                            prop="name"
                            label="姓名"
                            width="180" />
          <aty-table-column
                            prop="address"
                            label="地址" />
        </aty-table>
      </aty-row>

      <aty-row>
        <aty-title level="4">3.【aty-table】 带边框表格</aty-title>
        <aty-table
                   :pageable-data="tableData"
                   border
                   style="width: 100%">
          <aty-table-column
                            prop="date"
                            label="日期"
                            width="180" />
          <aty-table-column
                            prop="name"
                            label="姓名"
                            width="180" />
          <aty-table-column
                            prop="address"
                            label="地址" />
        </aty-table>
      </aty-row>

      <aty-row>
        <aty-title level="4">4.【aty-table】 带状态表格</aty-title>
        <aty-table
                   :pageable-data="tableData2"
                   border
                   :row-class-name="tableRowClassName"
                   style="width: 100%">
          <aty-table-column
                            prop="date"
                            label="日期"
                            width="180" />
          <aty-table-column
                            prop="name"
                            label="姓名"
                            width="180" />
          <aty-table-column
                            prop="address"
                            label="地址" />
        </aty-table>
      </aty-row>

      <aty-row>
        <aty-title level="4">5.【aty-table】 固定表头</aty-title>
        <aty-table
                   :pageable-data="tableData3"
                   border
                   height="200"
                   style="width: 100%">
          <aty-table-column
                            prop="date"
                            label="日期"
                            width="180" />
          <aty-table-column
                            prop="name"
                            label="姓名"
                            width="180" />
          <aty-table-column
                            prop="address"
                            label="地址" />
        </aty-table>
      </aty-row>

      <aty-row>
        <aty-title level="4">6.【aty-table】 固定列</aty-title>
        <aty-table
                   :pageable-data="tableData3"
                   border
                   style="width: 100%">
          <aty-table-column
                            fixed
                            prop="date"
                            label="日期"
                            width="180" />
          <aty-table-column
                            prop="name"
                            label="姓名"
                            width="180" />

          <aty-table-column
                            prop="name"
                            label="省份"
                            width="180" />

          <aty-table-column
                            prop="name"
                            label="市区"
                            width="180" />

          <aty-table-column
                            prop="address"
                            label="地址"
                            width="300" />

          <aty-table-column
                            prop="zip"
                            label="邮编"
                            width="180" />

          <aty-table-column
                            fixed="right"
                            label="操作"
                            width="180">
            <template slot-scope="scope">
              <aty-button @click="handleClick(scope.row)" type="text" size="small">查看</aty-button>
              <aty-button type="text" size="small">编辑</aty-button>
            </template>

          </aty-table-column>
        </aty-table>
      </aty-row>

      <aty-row>
        <aty-title level="4">7.【aty-table】 固定列和表头</aty-title>
        <aty-table
                   :pageable-data="tableData3"
                   border
                   height="260"
                   style="width: 100%">
          <aty-table-column
                            fixed
                            prop="date"
                            label="日期"
                            width="180" />
          <aty-table-column
                            prop="name"
                            label="姓名"
                            width="180" />

          <aty-table-column
                            prop="name"
                            label="省份"
                            width="180" />

          <aty-table-column
                            prop="name"
                            label="市区"
                            width="180" />

          <aty-table-column
                            prop="address"
                            label="地址"
                            width="300" />

          <aty-table-column
                            prop="zip"
                            label="邮编"
                            width="180" />

          <aty-table-column
                            fixed="right"
                            label="操作"
                            width="180">
            <template slot-scope="scope">
              <aty-button @click="handleClick(scope.row)" type="text" size="small">查看</aty-button>
              <aty-button type="text" size="small">编辑</aty-button>
            </template>

          </aty-table-column>
        </aty-table>
      </aty-row>

      <aty-row>
        <aty-title level="4">8.【aty-table】 流体高度设置一个最大高度。</aty-title>
        <aty-table
                   :pageable-data="tableData3"
                   border
                   max-height="300"
                   style="width: 100%">
          <aty-table-column
                            fixed
                            prop="date"
                            label="日期"
                            width="180" />
          <aty-table-column
                            prop="name"
                            label="姓名"
                            width="180" />

          <aty-table-column
                            prop="name"
                            label="省份"
                            width="180" />

          <aty-table-column
                            prop="name"
                            label="市区"
                            width="180" />

          <aty-table-column
                            prop="address"
                            label="地址"
                            width="300" />

          <aty-table-column
                            prop="zip"
                            label="邮编"
                            width="180" />

          <aty-table-column
                            fixed="right"
                            label="操作"
                            width="180">
            <template slot-scope="scope">
              <aty-button @click="handleClick(scope.row)" type="text" size="small">查看</aty-button>
              <aty-button type="text" size="small">编辑</aty-button>
            </template>

          </aty-table-column>
        </aty-table>
      </aty-row>

      <aty-row>
        <aty-title level="4">9.【aty-table】 多级表头</aty-title>
        <aty-table
                   :pageable-data="tableData3"
                   style="width: 100%">
          <aty-table-column
                            prop="date"
                            label="日期"
                            width="150" />
          <aty-table-column label="配送信息">
            <aty-table-column
                              prop="name"
                              label="姓名"
                              width="120" />
            <aty-table-column label="地址">
              <aty-table-column
                                prop="province"
                                label="省份"
                                width="120" />
              <aty-table-column
                                prop="city"
                                label="市区"
                                width="120" />
              <aty-table-column
                                prop="address"
                                label="地址" />
              <aty-table-column
                                prop="zip"
                                label="邮编"
                                width="120" />
            </aty-table-column>
          </aty-table-column>
        </aty-table>
      </aty-row>

      <aty-row>
        <aty-title level="4">10.【aty-table】 单选,设置 highlight-current-row</aty-title>
        <aty-table
                   ref="singleTable"
                   :pageable-data="tableData"
                   highlight-current-row
                   @current-change="handleCurrentChange"
                   style="width: 100%">
          <aty-table-column
                            type="index"
                            width="50" />
          <aty-table-column
                            property="date"
                            label="日期"
                            width="120" />
          <aty-table-column
                            property="name"
                            label="姓名"
                            width="120" />
          <aty-table-column
                            property="address"
                            label="地址" />
        </aty-table>
        <div style="margin-top: 20px">
          <aty-button @click="setCurrent(tableData[1])">选中第二行</aty-button>
          <aty-button @click="setCurrent()">取消选择</aty-button>
        </div>
      </aty-row>

      <aty-row>
        <aty-title level="4">11.【aty-table】 多选 type="selection"</aty-title>
        <aty-table
                   ref="multipleTable"
                   :pageable-data="tableData3"
                   tooltip-effect="dark"
                   style="width: 100%"
                   @selection-change="handleSelectionChange">
          <aty-table-column
                            type="selection"
                            width="55" />
          <aty-table-column
                            prop="date"
                            label="日期"
                            width="120" />
          <aty-table-column
                            prop="name"
                            label="姓名"
                            width="120" />
          <aty-table-column
                            prop="address"
                            label="地址"
                            show-overflow-tooltip />
        </aty-table>
        <div style="margin-top: 20px">
          <aty-button @click="toggleSelection([tableData3[1], tableData3[2]])">切换第二、第三行的选中状态</aty-button>
          <aty-button @click="toggleSelection()">取消选择</aty-button>
        </div>
      </aty-row>

      <aty-row>
        <aty-title level="4">12.【aty-table】 排序 sortable</aty-title>
        <aty-table
                   :pageable-data="tableData"
                   style="width: 100%"
                   default-sort="date descending">
          <aty-table-column
                            prop="date"
                            label="日期"
                            sortable
                            width="180" />
          <aty-table-column
                            prop="name"
                            label="姓名"
                            sortable
                            width="180" />
          <aty-table-column
                            prop="address"
                            label="地址"
                            :formatter="formatter" />
        </aty-table>
      </aty-row>

      <aty-row>
        <aty-title level="4">13.【aty-table】 筛选</aty-title>
        <aty-table
                   :pageable-data="tableData"
                   style="width: 100%">
          <aty-table-column
                            prop="date"
                            label="日期"
                            width="180">
            <aty-date-picker :transfer="true" slot="filter" @change="handleChange" />
          </aty-table-column>
          <aty-table-column
                            prop="name"
                            label="姓名"
                            width="180">
            <aty-select :transfer="true" slot="filter" value="beijing" :data="cityList"
                        @change="handleChange" />
          </aty-table-column>
          <aty-table-column
                            prop="address"
                            label="地址"
                            :formatter="formatter">
            <aty-input slot="filter" @change="handleChange" />
          </aty-table-column>
          <aty-table-column
                            prop="tag"
                            label="标签"
                            width="100">
            <aty-select :transfer="true" slot="filter" value="beijing" :data="cityList"
                        @change="handleChange" />
          </aty-table-column>
        </aty-table>
      </aty-row>
      <aty-row>
        <aty-title level="4">14.【aty-table】 自定义模版</aty-title>
        <aty-table
                   :pageable-data="tableData"
                   style="width: 100%">
          <aty-table-column
                            prop="date"
                            label="日期"
                            width="180">
            <template slot-scope="scope">
              <aty-icon type="ios-clock-outline" />
              <aty-text style="margin-left: 10px">{{ scope.row.date }}</aty-text>
            </template>
          </aty-table-column>
          <aty-table-column
                            prop="name"
                            label="姓名"
                            width="180">
            <template slot-scope="scope">
              <aty-tooltip placement="top">
                <aty-tag size="default" color="green" :closable="false">{{ scope.row.name }}</aty-tag>
                <aty-panel slot="content">
                  <aty-panel>姓名: {{ scope.row.name }}</aty-panel>
                  <aty-panel>住址: {{ scope.row.address }}</aty-panel>
                </aty-panel>
              </aty-tooltip>
            </template>
          </aty-table-column>
          <aty-table-column
                            prop="address"
                            label="地址"
                            :formatter="formatter" />
          <aty-table-column
                            label="操作"
                            width="240">
            <template slot-scope="scope">
              <aty-button type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</aty-button>
              <aty-button type="warning" @click="handleDelete(scope.$index, scope.row)">删除</aty-button>
            </template>
          </aty-table-column>
        </aty-table>
      </aty-row>

      <aty-row>
        <aty-title level="4">15.【aty-table】 折叠行</aty-title>
        <aty-table :pageable-data="tableData5" style="width: 100%">
          <aty-table-column type="expand">
            <template slot-scope="scope">
              <aty-form label-position="left" class="demo-table-expand">
                <aty-row>
                  <aty-col span="8">
                    <aty-form-item label="商品名称">
                      <span>{{ scope.row.name }}</span>
                    </aty-form-item>
                  </aty-col>
                  <aty-col span="8">
                    <aty-form-item label="所属店铺">
                      <span>{{ scope.row.shop }}</span>
                    </aty-form-item>
                  </aty-col>
                  <aty-col span="8">
                    <aty-form-item label="商品 ID">
                      <span>{{ scope.row.id }}</span>
                    </aty-form-item>
                  </aty-col>

                  <aty-col span="8">
                    <aty-form-item label="店铺 ID">
                      <span>{{ scope.row.shopId }}</span>
                    </aty-form-item>
                  </aty-col>
                  <aty-col span="8">
                    <aty-form-item label="商品分类">
                      <span>{{ scope.row.category }}</span>
                    </aty-form-item>
                  </aty-col>
                  <aty-col span="8">
                    <aty-form-item label="店铺地址">
                      <span>{{ scope.row.address }}</span>
                    </aty-form-item>
                  </aty-col>
                  <aty-col span="8">
                    <aty-form-item label="商品描述">
                      <span>{{ scope.row.desc }}</span>
                    </aty-form-item>
                  </aty-col>
                </aty-row>
              </aty-form>
            </template>
          </aty-table-column>
          <aty-table-column
                            label="商品 ID"
                            prop="id" />
          <aty-table-column
                            label="商品名称"
                            prop="name" />
          <aty-table-column
                            label="描述"
                            prop="desc" />
        </aty-table>
      </aty-row>

      <aty-row>
        <aty-title level="4">16.(1)【aty-table】 求和 show-summary</aty-title>
        <aty-table
                   :pageable-data="tableData6"
                   border
                   show-summary
                   style="width: 100%">
          <aty-table-column
                            prop="id"
                            label="ID"
                            width="180" />
          <aty-table-column
                            prop="name"
                            label="姓名" />
          <aty-table-column
                            prop="amount1"
                            sortable
                            label="数值 1" />
          <aty-table-column
                            prop="amount2"
                            sortable
                            label="数值 2" />
          <aty-table-column
                            prop="amount3"
                            sortable
                            label="数值 3" />
        </aty-table>
        '

        <aty-title level="4">(2)【aty-table】 求和 show-summary，自定义求和方法summary-method</aty-title>
        <aty-table
                   :pageable-data="tableData6"
                   border
                   height="200"
                   :summary-method="getSummaries"
                   show-summary
                   style="width: 100%; margin-top: 20px">
          <aty-table-column
                            prop="id"
                            label="ID"
                            width="180" />
          <aty-table-column
                            prop="name"
                            label="姓名" />
          <aty-table-column
                            prop="amount1"
                            label="数值 1（元）" />
          <aty-table-column
                            prop="amount2"
                            label="数值 2（元）" />
          <aty-table-column
                            prop="amount3"
                            label="数值 3（元）" />
        </aty-table>
      </aty-row>

      <aty-row>
        <aty-title level="4">17.(1)【aty-table】 合并列[Array，Object][0]</aty-title>
        <aty-table
                   :pageable-data="tableData6"
                   :span-method="arraySpanMethod"
                   border
                   style="width: 100%">
          <aty-table-column
                            prop="id"
                            label="ID"
                            width="180" />

          <aty-table-column
                            prop="name"
                            label="姓名" />
          <aty-table-column
                            prop="amount1"
                            sortable
                            label="数值 1" />
          <aty-table-column
                            prop="amount2"
                            sortable
                            label="数值 2" />
          <aty-table-column
                            prop="amount3"
                            sortable
                            label="数值 3" />
        </aty-table>
        <aty-title level="4">(2)【aty-table】 合并行[Array，Object][1]</aty-title>
        <aty-table
                   :pageable-data="tableData6"
                   :span-method="objectSpanMethod"
                   border
                   style="width: 100%; margin-top: 20px">
          <aty-table-column
                            prop="id"
                            label="ID"
                            width="180" />
          <aty-table-column
                            prop="name"
                            label="姓名" />
          <aty-table-column
                            prop="amount1"
                            label="数值 1（元）" />
          <aty-table-column
                            prop="amount2"
                            label="数值 2（元）" />
          <aty-table-column
                            prop="amount3"
                            label="数值 3（元）" />
        </aty-table>
      </aty-row>

      <aty-row>
        <aty-title level="4">18.【aty-table】 自定义索引</aty-title>
        <aty-table
                   :pageable-data="tableData"
                   style="width: 100%">
          <aty-table-column
                            type="index"
                            :index="indexMethod" />
          <aty-table-column
                            prop="date"
                            label="日期"
                            width="180" />
          <aty-table-column
                            prop="name"
                            label="姓名"
                            width="180" />
          <aty-table-column
                            prop="address"
                            label="地址" />
        </aty-table>
      </aty-row>

      <aty-row>
        <aty-title level="4">19.【aty-table】 自定义过滤</aty-title>
        <aty-table
                   :pageable-data="tableData"
                   style="width: 100%">
          <aty-table-column
                            type="index"
                            :index="indexMethod" />
          <aty-table-column
                            prop="date"
                            label="日期"
                            width="180" />
          <aty-table-column
                            prop="name"
                            label="姓名"
                            width="180">
            <aty-custom-filter slot="filter" data-type="date" compare-type="in" :filter-value="filterDate">
              <aty-title level="4" text="过滤几天的数据" />
              <aty-panel v-for="item in dateFilterDatas" :key="item.id">
                <aty-date-picker v-model="item.value" />
              </aty-panel>
              <aty-button text="增加" @click="addDateFilterCounts" />
            </aty-custom-filter>
          </aty-table-column>
          <aty-table-column
                            prop="address"
                            label="地址" />
        </aty-table>
      </aty-row>

      <aty-row>
        <aty-title level="4">20.【aty-table】 可变列</aty-title>
        <aty-button @click="changeYw1">切换列表-业务1</aty-button>
        <aty-button @click="changeYw2">切换列表-业务2</aty-button>
        <aty-table
                   :pageable-data="tableData"
                   :width="200">
          <aty-table-column
                            label="序号"
                            type="index" />
          <aty-table-column
                            prop="date"
                            label="日期" />
          <aty-table-column
                            prop="name"
                            label="姓名" />
          <aty-table-column
                            prop="address"
                            label="地址" :is-render="ywlx===1" />
        </aty-table>
      </aty-row>
    </aty-row>
  </div>
</template>
<script>
import Vue from 'vue'

export default {
  data () {
    return {
      dateFilterDatas: [{
        id: Math.random()
      }],
      currentRow: null,
      multipleSelection: [],
      cityList: [{
        code: 'beijing',
        codeType: 'beijing',
        name: '北京市'
      },
      {
        code: 'shanghai',
        codeType: 'shanghai',
        name: '上海市'
      },
      {
        code: 'shenzhen',
        codeType: 'shenzhen',
        name: '深圳市'
      },
      {
        code: 'hangzhou',
        codeType: 'hangzhou',
        name: '杭州市'
      }],
      tableData: (function (len) {
        var _data = []
        for (var i = 0; i < len; i++) {
          _data.push({
            date: '2016-05-0' + i,
            name: '赵六',
            tag: '公司',
            address: '上海市普陀区金沙江路 1516 弄'
          })
        }
        return _data
      })(4),
      tableData2: (function (len) {
        var _data = []
        for (var i = 0; i < len; i++) {
          _data.push({
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          })
        }
        return _data
      })(4),
      tableData3: (function (len) {
        var _data = []
        for (var i = 0; i < len; i++) {
          _data.push({
            date: '2016-05-0' + (i + 1),
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            zip: 200333,
            address: '上海市普陀区金沙江路 1518 弄'
          })
        }
        return _data
      })(10),
      tableData5: (function (len) {
        var _data = []
        for (var i = 0; i < len; i++) {
          _data.push({
            id: '12987122',
            name: '好滋好味鸡蛋仔',
            category: '江浙小吃、小吃零食',
            desc: '荷兰优质淡奶，奶香浓而不腻',
            address: '上海市普陀区真北路',
            shop: '王小虎夫妻店',
            shopId: '10333'
          })
        }
        return _data
      })(5),
      tableData6: (function (len) {
        var _data = []
        for (var i = 0; i < len; i++) {
          _data.push({
            id: '12987122' + i,
            name: '王小虎',
            amount1: (Math.random() * 100).toFixed(0),
            amount2: (Math.random() * 60).toFixed(0),
            amount3: (Math.random() * 50).toFixed(0)
          })
        }
        return _data
      })(5),
      ywlx: 1
    }
  },
  computed: {
    filterDate: function () {
      return this.dateFilterDatas.map(obj => {
        if (!obj.value) return ''
        return this.dateFormat(obj.value, 'yyyy-MM-dd')
      })
    }
  },
  methods: {
    addDateFilterCounts: function () {
      this.dateFilterDatas.push({
        id: Math.random()
      })
    },
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    setCurrent (row) {
      this.$refs.singleTable.setCurrentRow(row)
    },
    handleCurrentChange (val) {
      debugger
      this.currentRow = val
    },
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    formatter (row, column) {
      return row.address + '--自定文本'
    },

    filterTag (value, row) {
      return row.tag === value
    },
    filterHandler (value, row, column) {
      const property = column.property
      return row[property] === value
    },

    //  过滤条件
    handleChange (value, name, index) {
      console.log(value, name, index)
      alert('搜索条件改变，再次查询数据！')
    },
    handleEdit (index, row) {
      console.log(index, row)
    },
    handleDelete (index, row) {
      console.log(index, row)
    },
    getSummaries (param) {
      // 对象解构
      const { columns, data } = param
      const sums = []
      // 循环列
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          // 求和
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] += ' 元'
        } else {
          sums[index] = 'N/A'
        }
      })

      return sums
    },
    // 对象解构
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 2 === 0) {
        if (columnIndex === 0) {
          // return  [rowspan=1,colspan=2]
          return [1, 2]
        } else if (columnIndex === 1) {
          // return  [rowspan=0,colspan=0]
          return [0, 0]
        }
      }
    },

    // 对象解构
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    // 索引方法
    indexMethod (index) {
      return index * 2
    },
    changeYw1 () {
      this.ywlx = 1
    },
    changeYw2 () {
      this.ywlx = 2
    }
  },
  mounted () {
    // console.log(this)
  }

}
</script>
<style lang="less" type="text/less">
    .fd-table-box {
        margin: 20px;
        text-align: left;
    }

    .fd-table-box > .aty-row {
        padding-bottom: 15px;
    }

    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>
